<template>
  <div class="mg-lg" v-loading="loading">
    <!-- 待审核 -->
    <el-alert
      v-if="status === 3"
      class="mb-lg"
      title="平台审核中，请耐心等待。"
      type="warning"
      show-icon
    />
    <!-- 已驳回 -->
    <el-alert
      v-if="status === 0"
      class="mb-lg"
      :title="`订单已取消，取消原因：${ruleForm.buyerOrderList.remarks}`"
      type="error"
      show-icon
    />
    <el-form
      ref="ruleFormRef"
      :model="ruleForm"
      :rules="rules"
      hide-required-asterisk
    >
      <c-main-template
        minHeight="auto"
        title="订单信息"
        :isBreadcrumb="false"
        v-if="ruleForm.buyerOrderList"
      >
        <div class="mt-lg ml-lg mr-lg">
          <el-row>
            <el-col :span="8">
              <el-form-item label="订单号：">
                {{ ruleForm.buyerOrderList.id }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单总金额：" prop="productSumPrice">
                <div v-if="status === 1">
                  <c-money-input
                    v-model="ruleForm.productSumPrice"
                    placeholder="请输入价格"
                  >
                    <template #prepend>{{
                      ruleForm.buyerOrderList.productCurrency
                    }}</template>
                  </c-money-input>
                </div>
                <div v-else>
                  <span>{{ ruleForm.buyerOrderList.productCurrency }}</span>
                  <span class="ml-sm">{{
                    filters.thousands(ruleForm.productSumPrice)
                  }}</span>
                </div>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="下单时间：">
                {{
                  filters.dateYMDHMSFormat(ruleForm.buyerOrderList.timeCreate)
                }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="付汇方式：">
                {{ ruleForm.buyerOrderList.payMode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="成交方式：">
                {{ ruleForm.buyerOrderList.tradeMode }}
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="运输方式：">海运 </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="启运港：" prop="startHarborId">
                <c-port-select
                  v-if="status === 1"
                  type="Select"
                  v-model="ruleForm.startHarborId"
                />
                <c-port-select
                  v-else
                  type="Text"
                  v-model="ruleForm.startHarborId"
                />
              </el-form-item>
            </el-col>
            <el-col
              :span="8"
              v-if="ruleForm.buyerOrderList.tradeMode === 'CIF'"
            >
              <el-form-item label="目的港：" prop="endHarborId">
                <c-port-select
                  v-if="status === 1"
                  type="Select"
                  v-model="ruleForm.endHarborId"
                />
                <c-port-select
                  v-else
                  type="Text"
                  v-model="ruleForm.endHarborId"
                />
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="约定付款时间：" prop="payTimeNode">
                <span v-if="status === 1">
                  <el-select
                    class="wh"
                    v-model="ruleForm.payTimeNode"
                    placeholder="请选择约定付款时间"
                  >
                    <el-option
                      v-for="item in getAppointedTime"
                      :key="item.value"
                      :label="item.label"
                      :value="item.value"
                    />
                  </el-select>
                </span>
                <span v-else> {{ ruleForm.payTimeNode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="提车方式：">
                <span> {{ ruleForm.buyerOrderList.pickupMode }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单备注：">
                <span> {{ ruleForm.buyerOrderList.orderRemarks }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单状态：">
                {{ getStatusLabel(orderType, ruleForm.buyerOrderList.status) }}
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
      <c-main-template
        class="mt-lg"
        minHeight="auto"
        title="车辆信息"
        :isBreadcrumb="false"
        v-if="ruleForm.buyerOrderList"
      >
        <div class="mg-lg">
          <c-table-template :data="[ruleForm.buyerOrderList]" border>
            <el-table-column label="车辆信息" align="center">
              <span>{{ ruleForm.buyerOrderList.productInfo }}</span>
            </el-table-column>
            <el-table-column label="数量(辆)" align="center">
              <span>{{ ruleForm.buyerOrderList.productAmount }}</span>
            </el-table-column>
            <el-table-column label="单价" align="center">
              <span>{{ ruleForm.buyerOrderList.productCurrency }}</span>
              <span class="ml-sm">
                {{ filters.thousands(ruleForm.buyerOrderList.productPrice) }}
              </span>
            </el-table-column>
          </c-table-template>
        </div>
      </c-main-template>
      <c-main-template
        class="mt-lg"
        minHeight="auto"
        title="进口商信息"
        :isBreadcrumb="false"
        v-if="ruleForm.buyerInfo"
      >
        <div class="mt-lg ml-lg mr-lg">
          <el-row>
            <el-col :span="8">
              <el-form-item label="企业名称：">
                <span>{{ ruleForm.buyerInfo.name }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系人：">
                <span>{{ ruleForm.buyerInfo.contactName }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系方式：">
                <span>{{ ruleForm.buyerInfo.contactMobile }}</span>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="联系邮箱：">
                <span>{{ ruleForm.buyer.email }}</span>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
      <!-- 合同 -->
      <c-main-template
        class="mt-lg"
        minHeight="auto"
        title="合同信息"
        :isBreadcrumb="false"
        v-if="ruleForm?.buyerContractList?.url"
      >
        <div class="mt-lg ml-lg mr-lg">
          <el-row>
            <el-col :span="8">
              <el-form-item label="">
                 <el-link  type="primary" :underline="false" @click="onFileOpen(ruleForm.buyerContractList.url)">
                {{ruleForm.buyerContractList.contractNb}}
              </el-link>
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </c-main-template>
      <!-- 发货信息 -->
      <c-main-template
        class="mt-lg"
        minHeight="auto"
        title="发货信息"
        :isBreadcrumb="false"
        v-if="
          ruleForm.orderDeliveryList && ruleForm.orderDeliveryList.length > 0
        "
      >
        <div class="mg-lg">
          <el-tabs v-model="activeTabs" type="card">
            <el-tab-pane
              v-for="(item, index) in ruleForm.orderDeliveryList"
              :label="`货物 ${index + 1}`"
              :key="index"
              :name="index"
            >
              <div class="goods-tabs">
                <c-deliver-goods :modelValue="item"  :form="ruleForm"/>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </c-main-template>
      <!-- 待确认 -->
      <div class="mt-lg mb-30" v-if="status === 1">
        <el-button
          size="large"
          type="primary"
          @click="handleSubmit"
          :loading="buttonLoading"
          >确认</el-button
        >  
        <el-button
          size="large"
          @click="handleRejectOpen"
          :loading="buttonLoading"
          >取消订单</el-button
        >
      </div>
    </el-form>
    <c-reject ref="cRejectRef" @change="onApprove" />
  </div>
</template>
<script setup>
import { ref, onMounted, getCurrentInstance, computed } from "vue";
import cDeliverGoods from "./components/DeliverGoods.vue";
import cReject from "@/components/Reject/index.vue";
import { useRoute, useRouter } from "vue-router";
import {
  termsDeliveryType,
  orderType,
  getStatusLabel,
} from "@/utils/status.js";
import { deepClone ,onFileOpen} from "@/utils/index.js";
import { ElMessageBox, ElMessage } from "element-plus";
const { proxy } = getCurrentInstance();
const route = useRoute();
const router = useRouter();
const ruleFormRef = ref();
const cRejectRef = ref();
const ruleForm = ref({});
const activeTabs = ref(0);
const loading = ref(false);
const buttonLoading = ref(false);
const status = ref(null);
onMounted(() => {
  getById();
});
const getAppointedTime = computed(() => {
  if(!ruleForm.value.buyerOrderList) {
    return []
  }
  const { list } = termsDeliveryType.find((x) => {
    return x.code === ruleForm.value.buyerOrderList.tradeMode;
  });
  return list;
});

const handleSubmit = () => {
  ruleFormRef.value.validate(async (valid) => {
    if (valid) {
      ElMessageBox.confirm("确认执行此操作吗？", "系统提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        const params = {
          ...ruleForm.value,
          flag: true,
        };
        onApprove(params);
      });
    }
  });
};

const onApprove = async (data) => {
  const url = "/buyerOrderList/approval/seller";
  buttonLoading.value = true;
  try {
    await proxy.$post({ url, data });
    ElMessage.success("操作成功");
    router.go(-1);
    buttonLoading.value = false;
  } catch (error) {
    buttonLoading.value = false;
  }
};
const handleRejectOpen = () => {
  cRejectRef.value.handleOpen({
    flag: false,
    id: ruleForm.value.id,
  });
};
const getById = async () => {
  const url = "/buyerOrderList/getSellerOrderById";
  const params = route.query;
  if (params.id) {
    loading.value = true;
    const res = await proxy.$get({ url, params });
    if (res.buyerOrderList) {
      res.id = res.buyerOrderList.id;
      res.productSumPrice = res.buyerOrderList.productSumPrice;
      res.startHarborId = res.buyerOrderList.startHarborId;
      res.endHarborId = res.buyerOrderList.endHarborId;
      res.payTimeNode = res.buyerOrderList.payTimeNode;
      status.value = res.buyerOrderList.status;
    }
    ruleForm.value = deepClone(res);
    loading.value = false;
  }
};
const rules = ref({
  productSumPrice: [
    { required: true, message: "请输入订单金额", trigger: "change" },
  ],
  startHarborId: [
    { required: true, message: "请选择启运港", trigger: "change" },
  ],
  endHarborId: [{ required: true, message: "请选择目的港", trigger: "change" }],
  payTimeNode: [
    { required: true, message: "请选择约定付款时间", trigger: "change" },
  ],
});
</script>
<style lang="less" scoped>
.goods-tabs {
  border-bottom: 1px solid #e9e9e9;
  border-left: 1px solid #e9e9e9;
  border-right: 1px solid #e9e9e9;
  min-height: 50px;
}
:deep(.el-tabs__header) {
  margin: 0 !important;
}
</style>
